<template>
  <view class="main">
    <swiper v-if="isShowContent" ref="swiper" class="swiper" :indicator-dots="indicatorDots" autoplay>
      <swiper-item>
        <view class="swiper-item">
          <view class="content">
            <text class="title block">每日健康监测功能已开通</text>
            <text class="sub-title block">您可自助录入健康监测信息</text>
            <!-- <button class="btn" size="mini" type="primary" @tap="goto('/pages/user/health')">立即体验</button> -->
            <button class="btn" size="mini" type="primary" @tap="forbidden">立即体验</button> 
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view class="wrapper">
      <view :class="{btn: true, 'center-info': !isShowContent}">
        <picker v-if="(!user || !user.hasSubmit) && riskTyleList.length > 1" range-key="label" :range="riskTyleList" @change="handFabTap">
          <view class="picker-content">
            <view class="btn-icon primary">
              <m-icon type="chat"></m-icon>
            </view>
            <text>信息录入</text>
          </view>
        </picker>
        <view v-if="user && user.hasSubmit || (riskTyleList.length === 1 && !user.hasSubmit)" class="picker-content" @tap="goto('/pages/user/information', true, riskTyleList[0] ? `risk=${riskTyleList[0].id}` : null)">
          <view class="btn-icon primary">
            <m-icon type="chat"></m-icon>
          </view>
          <text>信息录入</text>
        </view>
      </view>
      <!-- <view class="btn" @tap="goto('/pages/user/health', true)"> -->
      <view class="btn" @tap="forbidden" v-if="isShowContent">
        <view class="btn-icon success">
          <m-icon type="eye"></m-icon>
        </view>
        <text>健康监测</text>
      </view>
      <!-- <view class="btn" @tap="goto('/pages/user/result', true)"> -->
      <view class="btn" @tap="forbidden" v-if="isShowContent">
        <view class="btn-icon warning">
          <m-icon type="info-filled"></m-icon>
        </view>
        <text>核酸检测结果</text>
      </view>
      <view class="btn" v-if="isShowContent">
        <!-- <view class="content" @tap="goto('/pages/user/transfer', true)"> -->
        <view class="content" @tap="forbidden">
          <view class="btn-icon error">
            <m-icon type="paperplane"></m-icon>
          </view>
          <text>隔离信息</text>
          <!-- <text>转运申请</text> -->
          <!-- <text>预计解除隔离日期</text> -->
        </view>
      </view>
    </view>
    <text class="title m20" v-if="isShowContent">服务提醒</text>
    <!-- <pane-card title="采样周期提醒" subTitle="您隔离期间采样安排，请查看..." badge @onNext="goto('/pages/main/sampling', true)"> -->
    <pane-card v-if="isShowContent" title="采样周期提醒" subTitle="您隔离期间采样安排，请查看..." badge @onNext="forbidden">
      <view class="icon" slot="icon">
        <m-icon fill type="chat"></m-icon>
      </view>
    </pane-card>
    <!-- <pane-card title="健康监测提醒" subTitle="您每日的健康监测，请查看..." badge @onNext="goto('/pages/user/health', true)"> -->
    <pane-card v-if="isShowContent" title="健康监测提醒" subTitle="您每日的健康监测，请查看..." badge @onNext="forbidden"> 
      <view class="icon" slot="icon">
        <m-icon fill type="chat"></m-icon>
      </view>
    </pane-card>
  </view>
</template>
<script>
  import Api from '@/api/main'
  import PaneCard from '@/components/m-card/pane-card.vue'
  import MIcon from '@/components/m-icon/m-icon.vue'
  import { isValidSession, wxLogin, wxReLogin } from '@/common/utils'
  import {
    mapState,
    mapMutations,
    mapActions
  } from 'vuex'

  export default {
    components: {
      PaneCard,
      MIcon
    },
    data() {
      return {
        interval: 3000,
        indicatorDots: false,
        // 登录类型：phone手机号登录、wx微信登录
        loginType: 'wx',
        riskTyleList: [
          // {
          //   id: 1,
          //   label: '密接'
          // },
          // {
          //   id: 2,
          //   label: '次密'
          // }
        ]
      }
    },
    computed: {
      ...mapState(['forcedLogin', 'hasLogin', 'userName', 'user']),

      getSwiperLen() {
        if (!this.$refs.swiper) {
          return false
        }
        return this.$refs.swiper.length
      },

      isShowContent() {
        return  this.loginType !== 'wx'
      }
    },
    async onLoad() {
      console.log('onLoad');
      await this.getCondition()
      await this.getUserInfo({ needLogin: false, showToast: false });
      await this.bindLogin()
    },
    mounted() {
      if (this.$refs.swiper) {
        this.indicatorDots = this.$refs.swiper.$children.length > 1
      }
    },
    methods: {
      ...mapMutations(['login']),
      ...mapActions(['getUserInfo', 'loginWx']),
      forbidden() {
        uni.showToast({
          title: '功能暂未开启',
          icon: 'none'
        })
      },
      // 判断登陆
      async bindLogin() {
        console.log('bindLogin', this.hasLogin);
        return new Promise(async (resolve, reject) => {
          if (!this.hasLogin) {
            if (this.loginType === 'phone') {
              uni.navigateTo({
                url: '/pages/login/index'
              });
              resolve(false)
            }
            if (this.loginType === 'wx') { 
              await wxReLogin()
              return resolve(true)
            }
          }
          return resolve(true)
        })
      },
      async goto(url, needLogin, params = null) {
        if (needLogin) {
          const hasLogin = await this.bindLogin()
          console.log('hasLogin', hasLogin);
          if (!hasLogin) {
            return
          }
        }
        if (params) {
          url = url.includes('?') ? `${url}&${params}` : `${url}?${params}`
        }
        console.log('url', url);
        uni.navigateTo({
          url: url
        })
      },
      getDate(time = Date.now()) {
        const date = new Date(time);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();

        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },
      showModel() {
        const time = Date.now() + 21 * 24 * 60 * 60 * 1000
        const date = this.getDate(time)
        uni.showModal({
          title: '提示',
          showCancel: false,
          content: `预计解除隔离时间：${date}`
        })
        // this.$refs.popup.open()
        // this.$refs.popup.$trigger()
      },
      handFabTap(val) {
        // 先选择风险等级
        console.log('handFabTap', val);
        if (!this.riskTyleList || !this.riskTyleList.length) {
          return
        }
        const { value: index } = val.detail
        const value = this.riskTyleList[index]
        console.log('risk-value', value);
        uni.navigateTo({
          url: `/pages/user/information?risk=${value.id}`
        });
      },
      // 获取证件类型
      async getCondition() {
        const res = await this.$http.post(Api.getCondition, {}, { showToast: false });
        console.log('getCondition', res);
        if (res) {
          if (res.riskType) {
            this.riskTyleList = res.riskType
          }
          if (res.loginType) {
            this.loginType = res.loginType || 'phone'
          }
        }
      },
      // 选择风险类型
      async confirm(val) {
        if (!this.riskTyleList && !this.riskTyleList.length) {
          return
        }

        const { value: index } = val.detail
        const value = this.riskTyleList[index]
        if (!value) {
          return
        }
        const url = `/pages/user/transfer?risk=${value.id}`
        await this.goto(url)
      }
    }
  }
</script>
<style lang="scss">
  .main {
    width: 100%;
    height: 100%;
    padding: 0 40rpx;

    .swiper {
      height: 300rpx;
    }

    .wrapper {
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .btn {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 2.5;

        &-icon {
          width: 76rpx;
          height: 76rpx;
          font-size: 38rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          color: #fff;

          &.primary {
            background-color: $uni-color-primary;
          }

          &.success {
            background-color: $uni-color-success;
          }

          &.warning {
            background-color: $uni-color-warning;
          }

          &.error {
            background-color: $uni-color-error;
          }
        }

        text {
          font-size: 26rpx;
        }
      }

      .content {
        width: auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    .swiper-item {
      // padding: 40rpx 30rpx 0 30rpx;
      height: 100%;
      background-color: rgba($color: $uni-color-primary, $alpha: 0.08);
      border-radius: 32rpx;

      .btn {
        margin-top: 40rpx;
      }
    }

    .content {
      line-height: 2;
      padding: 40rpx
    }

    .title {
      font-size: 36rpx;
      font-weight: 500;
    }

    .sub-title {
      font-size: 24rpx;
      color: $uni-sub-text-color;
    }

    .m20 {
      display: block;
      margin: 40rpx 0;
    }

    .icon {
      border-radius: 14rpx;
      background-color: rgba($color: $uni-color-primary, $alpha: 0.1);
      color: $uni-color-primary;
    }

    .picker-content {
      // text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .center-info {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .btn-icon {
        width: 130rpx;
        height: 130rpx;
        font-size: 65rpx;
      }
      text {
        font-size: 34rpx !important;
      }
    }
  }

  button[type=primary] {
    background-color: $uni-color-primary;
  }
</style>